<template>
  <div>
    <div id="bag" class="header bag">
      <div></div>
      <h2>学习笔记本</h2>
      <p @click="changeFlags">☰</p>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  props: {
    show: Boolean,
  },
  setup(props, { emit }) {
    function changeFlags() {
      console.log(1);
      emit("update:show", !props.show);
    }
    return {
      changeFlags,
    };
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 60px;
  background-color: #f49995;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  top: 0;
  left: 0;
  z-index: 999;
  h2 {
    color: #fff;
  }
  p {
    font-size: 26px;
    color: #fff;
  }
}
</style>
